<template>
    <div class="shoppingCart">
        <div class="shoppingCart_fiexd">
            <div class="changBox_fiexd" @click="radioFiexdBtn">
                <span class="radio_fiexd" :class="{'active':isAcitve}"></span> 全选
            </div>
            <div class="del_fiexd" @click="cartDelBtn">
                移除商品
            </div>
        </div>
        <yd-list theme="5" style="margin-top:0.8rem;margin-bottom:0.9rem" class="loadList" slot="list">
            <div class="cartList" v-for="(item, index) in list" :key="index">
                <div class="changBox" @click="receivingBtn(item,index)">
                    <span class="radio" :class="{active:isRadio[index]}"></span>
                </div>
                <div class="cartList_img" @click="receivingBtn(index)">
                    <img v-if="item.goodsImage" :src="imgUrl+item.goodsImage" alt="">
                </div>
                <div class="cartList_box">
                    <div class="cartList_tit">{{item.goodsName}}</div>
                    <div class="cartList_color">
                        <span v-if="item.chooseGoodsSpec=='N;'">规格：默认</span>
                        <span v-else>规格：{{item.chooseGoodsSpec}}</span>
                    </div>
                    <div class="cartList_money">
                        <b>￥</b>
                        <yd-countup v-if="item.goodsPrice" :endnum="item.goodsPrice" duration="0.1" decimals="2" separator=","></yd-countup>
                    </div>
                </div>
                <yd-spinner class="spinner" v-model="item.goodsNum"></yd-spinner>
                <!-- <input type="text" v-model="item.goodsNum" @change.native="countBtn"> -->
            </div>
        </yd-list>
        <div class="bottom_fiexd">
            <div class="bottom_fiexd_left">
                全部：
                <b>￥</b>
                <yd-countup :endnum="totalMoney" duration="0.1" decimals="2" separator=","></yd-countup>
            </div>
            <div class="bottom_fiexd_right" @click="purchaseBtn" :class="{'fiexdActive':totalCount>0}">
                去结算
                <span v-if="totalCount > 0">({{totalCount}})件</span>
            </div>
        </div>
    </div>
</template>
<script>

export default {
    name: 'shoppingCart',
    data() {
        return {
            imgUrl: this.CONSTANT.imgBaseUrl,
            list: [],
            page: 1,
            pageSize: 10,
            isAcitve: false,
            isRadio: [],
            totalMoney: 0,
            //总计
            listMoney: [],
            totalCount: 0,
            cartIds: [],
            cartId: '',// 购物车id  必填
            qty: 0, //数量  必填,
            selected: 0// 是否选中 0否 1是  必填
        }
    },
    created: function() {
        this.init();
        this.cartGoodsNum();
    },
    mounted: function() {
        this.$store.commit('scan','');
    },
    methods: {
        //购物车商品数量
        cartGoodsNum() {
            this.$axios.get(this.CONSTANT.wapiBaseUrl + 'member/statistics')
                .then((response) => {
                    if (response.status == 200) {
                        this.$store.commit('cartGoodsNum', response.data.object.cartGoodsNum);
                    }
                }).catch((error) => {
                    this.$dialog.loading.close();
                });
        },
        edit(cartId, qty, selected) {
            this.$axios.get(this.CONSTANT.wapiBaseUrl + 'cart/update?cartId=' + cartId + '&qty=' + qty + '&selected=' + selected)
                .then((response) => {
                }).catch((error) => {
                    this.$dialog.loading.close();
                });
        },
        init() {
            this.$dialog.loading.open('请稍后');
            this.$axios.get(this.CONSTANT.wapiBaseUrl + 'cart/list')
                .then((response) => {
                    this.$dialog.loading.close();
                    if (response.status == 200) {
                        this.isRadio = [];
                        for (var i = 0; i < response.data.object.length; i++) {
                            var element = response.data.object[i].selected;
                            if (element == '1') {
                                this.isRadio.push(true);
                            } else {
                                this.isRadio.push(false);
                            }
                        }
                        this.list = response.data.object;
                    }
                }).catch((error) => {
                    this.$dialog.loading.close();
                });
        },
        //支付
        purchaseBtn() {
            if (this.totalCount > 0) {
                this.$dialog.loading.open('请稍后');
                for (var i = 0; i < this.listMoney.length; i++) {
                    if (this.listMoney[i]) {
                        var element = this.listMoney[i].goodsPrice;
                        if (element != 0) {
                            this.edit(this.listMoney[i].cartId, this.listMoney[i].goodsInt, 1);
                        } else {
                            this.edit(this.listMoney[i].cartId, this.listMoney[i].goodsInt, 0);
                        }
                    }
                }
                setTimeout(() => {
                    this.$dialog.loading.close();
                    this.$router.push('/pay/purchase');
                }, 600)
            }
        },
        receivingBtn(item, index) {
            let jsons = {};
            if (this.isRadio[index]) {
                this.$set(this.isRadio, index, false);
                jsons.goodsPrice = 0;
                jsons.goodsNum = 0;
                jsons.goodsInt = this.list[index].goodsNum;
                jsons.cartId = this.list[index].cartId;
                this.isAcitve = false;
                //是否选中
            } else {
                this.$set(this.isRadio, index, true);
                jsons.goodsPrice = this.list[index].goodsPrice;
                jsons.goodsNum = this.list[index].goodsNum;
                jsons.goodsInt = this.list[index].goodsNum;
                jsons.cartId = this.list[index].cartId;
                //是否选中
            }
            this.$set(this.listMoney, index, jsons);
            this.getAllMoney();
        },
        //全选
        radioFiexdBtn() {
            this.isAcitve = !this.isAcitve;
            if (this.isAcitve) {
                let length = this.list.length;
                let arr = [];
                for (var i = 0; i < length; i++) {
                    arr.push(true);
                    let jsons = {};
                    jsons.goodsPrice = this.list[i].goodsPrice;
                    jsons.goodsNum = this.list[i].goodsNum;
                    jsons.goodsInt = this.list[i].goodsNum;
                    jsons.cartId = this.list[i].cartId;
                    this.$set(this.listMoney, i, jsons);
                }
                this.isRadio = arr;
            } else {
                this.isRadio = [];
                this.listMoney = [];
            }
            this.getAllMoney();
        },
        //汇总数量和金额
        getAllMoney() {
            if (this.listMoney) {
                this.totalMoney = 0;
                this.totalCount = 0;
                this.listMoney.forEach((element) => {
                    this.totalCount += element.goodsNum;
                    this.totalMoney = this.totalMoney + (element.goodsPrice * element.goodsNum);
                });
            }

        },
        cartListBtn(newValue) {
            if (this.isRadio.length > 0) {
                for (var i = 0; i < this.isRadio.length; i++) {
                    if (this.isRadio[i]) {
                        let jsons = {};
                        jsons.goodsPrice = newValue[i].goodsPrice;
                        jsons.goodsNum = newValue[i].goodsNum;
                        jsons.goodsInt = newValue[i].goodsNum;
                        jsons.cartId = newValue[i].cartId;
                        this.$set(this.listMoney, i, jsons);
                        this.getAllMoney();
                    }
                }
            }
        },
        //移除
        cartDelBtn() {
            if (this.listMoney.length < 1) {
                return false;
            }
            this.$dialog.confirm({
                title: '提示',
                mes: '确定移除该商品？',
                opts: [
                    {
                        txt: '取消',
                        color: false,
                        callback: () => {

                        }
                    },
                    {
                        txt: '确定',
                        color: true,
                        callback: () => {
                            let arr = [];
                            this.listMoney.forEach((element) => {
                                if (element.goodsNum != 0) {
                                    arr.push(element.cartId);
                                }
                            });
                            this.$dialog.loading.open('请稍后');
                            this.$axios.get(this.CONSTANT.wapiBaseUrl + 'cart/delete?cartIds=' + arr)
                                .then((response) => {
                                    this.$dialog.loading.close();
                                    if (response.status == 200) {
                                        if (response.data.msg == 'SUCCESS') {
                                            this.$dialog.toast({
                                                mes: '删除成功',
                                                timeout: 600
                                            });
                                            this.isRadio = [];
                                            this.listMoney = [];
                                            this.totalCount = 0;
                                            this.cartIds = [];
                                            this.getAllMoney();
                                            this.cartGoodsNum();
                                            this.init();
                                        }
                                    }
                                }).catch((error) => {
                                    this.$dialog.loading.close();
                                });
                        }
                    }
                ]
            });
        }
    },
    watch: {
        list: {
            handler(newValue) {
                this.cartListBtn(newValue);
            },
            deep: true
        }
    }
}
</script>
<style  scoped>
.bottom_fiexd {
    position: fixed;
    width: 100%;
    height: 0.9rem;
    left: 0;
    bottom: 0;
    line-height: 0.9rem;
    background: #fff;
    text-align: center;
    font-size: 14px;
    z-index: 99;
}

.bottom_fiexd_left {
    float: left;
    width: 60%;
    height: 100%;
    border-top: 1px solid #d9d9d9;
    overflow: hidden;
}

.bottom_fiexd_left b {
    font-weight: 400;
    font-size: 12px;
    color: #C00D23;
}

.bottom_fiexd_left span {
    font-size: 16px;
    color: #C00D23;
}

.bottom_fiexd_right {
    float: left;
    width: 40%;
    height: 100%;
    border-top: 1px solid #ccc;
    background: #ccc;
    color: #fff;
}

.fiexdActive {
    background: #C00D23;
    border-top: 1px solid #C00D23;
}

.shoppingCart_fiexd {
    position: fixed;
    width: 100%;
    height: 0.9rem;
    left: 0;
    top: 0;
    color: #4a4a4a;
    border-bottom: 1px solid #d9d9d9;
    box-sizing: border-box;
    padding: 0 0.2rem;
    font-size: 14px;
    line-height: 0.9rem;
    background: #fff;
    z-index: 99;
}

.changBox_fiexd {
    float: left;
    width: 50%;
    height: 100%;
    overflow: hidden;
}

.del_fiexd {
    float: left;
    width: 50%;
    text-align: right;
    height: 100%;
    overflow: hidden;
}

.del_fiexd:active {
    color: #EF4F4F;
}

.changBox {
    float: left;
    width: 0.4rem;
    height: 100%;
    margin-right: 0.2rem;
    text-align: center;
}

.radio_fiexd {
    display: block;
    float: left;
    width: 0.4rem;
    margin: 0.22rem 0;
    height: 0.4rem;
    margin-right: 0.15rem;
    box-sizing: border-box;
    border: 1px solid #CDCDCD;
    position: relative;
}

.changBox_fiexd span.active {
    content: '';
    border: 1px solid #EF4F4F;
    display: block;
    position: relative;
}

.changBox_fiexd span.active:after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto auto;
    width: 0.28rem;
    height: 0.28rem;
    background: #EF4F4F;
}

.radio {
    display: block;
    float: left;
    width: 0.42rem;
    margin: 0.71rem 0;
    height: 0.42rem;
    box-sizing: border-box;
    border: 1px solid #CDCDCD;
    border-radius: 50%;
    position: relative;
}

.changBox span.active {
    content: '';
    border: 1px solid #EF4F4F;
    display: block;
    position: relative;
}

.spinner {
    position: absolute;
    width: 1.6rem!important;
    right: 0.2rem;
    bottom: 0.4rem;
}

.changBox span.active:after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto auto;
    border-radius: 50%;
    width: 0.3rem;
    height: 0.3rem;
    background: #EF4F4F;
}

.cartList {
    width: 100%;
    height: 2.6rem;
    padding: 0.3rem 0.2rem;
    overflow: hidden;
    color: #4a4a4a;
    font-size: 14px;
    position: relative;
}

.cartList:after {
    content: "";
    position: absolute;
    z-index: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    border-bottom: 1px solid #d9d9d9;
    -webkit-transform: scaleY(.5);
    transform: scaleY(.5);
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
}

.cartList_tit {
    width: 100%;
    padding-top: 0.2rem;
    height: 0.8rem;
    line-height: 0.6rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 16px;
}

.cartList_color {
    width: 100%;
    height: 0.5rem;
    line-height: 0.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #777;
}

.cartList_money {
    font-size: 16px;
    width: 100%;
    height: 0.5rem;
    line-height: 0.5rem;
    color: #C00D23;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cartList_money b {
    font-weight: 400;
    font-size: 12px;
}

.cartList_color span:nth-of-type(1) {
    margin-right: 0.2rem;
}

.cartList_img {
    width: 2rem;
    height: 2rem;
    float: left;
}

.cartList_img img {
    width: 100%;
    min-height: 100%;
}

.cartList_box {
    float: left;
    width: calc(100% - 2.6rem);
    box-sizing: border-box;
    padding-left: 0.2rem;
    height: 100%;
}
</style>

<style>
.shoppingCart .yd-spinner>a {
    width: 33%!important;
}

.shoppingCart .yd-spinner>input {
    width: 34%!important;
}
</style>